<template>
  <div class="setBox">
    <header>
      <div class="back" @click="$router.go(-1)"></div>
      <span>设置</span>
    </header>
    <main>
      <div class="clear">
        <span>清除缓存</span>
        <div>
          <span>14.4M</span>
          <span class="icon"> &gt; </span>
        </div>
      </div>
      <div class="center">
        <ul>
          <li class="liebiao">
            <span>版本</span>
            <div>
              <span></span>
              <span class="icon"> &gt; </span>
            </div>
          </li>
          <li class="liebiao" @click="goAbout">
            <span>关于美悦</span>
            <div>
              <span></span>
              <span class="icon"> &gt; </span>
            </div>
          </li>
          <li class="liebiao" @click="goLicense">
            <span>营业执照</span>
            <div>
              <span></span>
              <span class="icon"> &gt; </span>
            </div>
          </li>
          <li class="liebiao" @click="goLogout">
            <span>注销账号</span>
            <div>
              <span></span>
              <span class="icon"> &gt; </span>
            </div>
          </li>
          <li class="liebiao"></li>
          <li class="liebiao"></li>
          <li class="liebiao"></li>
          <li class="liebiao"></li>
        </ul>
      </div>
      <button>退出登录</button>
    </main>
  </div>
</template>

<script>
export default {
  methods: {
    goAbout(){
      this.$router.push("/Mine/About")
    },
    goLicense(){
      this.$router.push("/Mine/License")
    },
    goLogout(){
      this.$router.push("/Mine/Logout")
    },
  },
};
</script>
<style scoped lang="scss">
header {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #c0c0c0;
  text-align: center;
}
header .back {
  float: left;
  margin-top: 32.5px;
  margin-left: 20px;
  width: 19px;
  height: 35px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pshvf6oyob5e2v34gvjdf963utrfrmi7si6b18e2f0-ee71-4c15-a09d-11de00a665d4) -1px -1px
    no-repeat;
  background-size: 20px 37px;
}
header span {
  line-height: 100px;
  font-size: 30px;
}
main{
    font-size: 30px;
    line-height: 70px;
}
.setBox{
    height: 100%;
    background-color: #FAFAFA;
}
.clear{
    margin-top: 50px;
    width: 100%;
    height: 70px;
    background-color: white;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}
.clear span:nth-of-type(1){
    float: left;
    margin-left: 30px;
}
.clear div{
    width: 170px;
    height: 68px;
    float: right;
    margin-right: 30px;
}
.clear div span{
    color: #c0c0c0;
}
.clear .icon{
    float: right;
}
main .center{
    margin-top: 50px;
    width: 100%;
    height: 600px;
}
main .liebiao{
    background-color: white;
    width: 100%;
    height: 75px;
    border-top: 1px solid black;
}
main .liebiao span:nth-of-type(1){
    float: left;
    margin-left: 30px;
}
main .liebiao div{
    width: 170px;
    height: 68px;
    float: right;
    margin-right: 30px;
}
main .liebiao div span{
    color: #c0c0c0;
}
main .liebiao .icon{
    float: right;
}
main button{
  width: 300px;
  height: 100px;
  background-color: red;
  color: white;
  border: 0px;
  border-radius: 100px;
  margin-left: 225px;
}
</style>
